/*
* {{comment}}
*/

import React, { FC, CSSProperties, useState } from 'react';

export interface Icon{{icon.name}}Props {
    fill?: string;
    hoverFill?: string;
    className?: string;
    height?: number;
    kind?: string;
    onClick?: () => void;
    preview?: boolean;
    size?: number;
    style?: CSSProperties;
    width?: number;

    wrapper?:{
        isEnable: boolean;

        className?: string;
        style?: CSSProperties;
    }

    isWithWrapper?: boolean;
    wrapperStyle?: CSSProperties;

    isEnableHoverState?: boolean;

    [key: string]: string | boolean | number | object;
}

export const Icon{{icon.name}}:FC<Icon{{icon.name}}Props> = (props) => {
    const {
        fill = '#fff',
        hoverFill = '#ccc',
        size = 30,
        height = undefined,
        width = undefined,
        onClick = undefined,
        style = undefined,
        className = undefined,
        isEnableHoverState = false,
        ...otherProps
    } = props;

    const [isHover, setIsHover] = useState<boolean>(false);

    const iconEl = {{icon.content}}

    return props.wrapper?.isEnable ? (
        <div className={props.wrapper?.className} style={props.wrapper?.style}>
            {iconEl}
        </div>
    ) : (
        <>{iconEl}</>
    );
};

Icon{{icon.name}}.displayName = 'Icon{{icon.name}}';
